<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="!crud.props.searchToggle">
        <el-form size="small" label-width="100px" ref="form" :model="query">
          <el-row :gutter="10">
<!--            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">-->
<!--              <el-form-item label="业务开始日期" prop="startDate">-->
<!--                <el-date-picker-->
<!--                  v-model="query.startDate"-->
<!--                  type="date"-->
<!--                  style="width: 100%;"-->
<!--                  default-value-->
<!--                  format="yyyy - MM - dd "-->
<!--                  value-format="yyyy-MM-dd"-->
<!--                  placeholder="选择日期">-->
<!--                </el-date-picker>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">-->
<!--              <el-form-item label="业务结束日期" prop="endDate">-->
<!--                <el-date-picker-->
<!--                  v-model="query.endDate"-->
<!--                  type="date"-->
<!--                  style="width: 100%;"-->
<!--                  default-value-->
<!--                  format="yyyy-MM-dd "-->
<!--                  value-format="yyyy-MM-dd"-->
<!--                  placeholder="选择日期">-->
<!--                </el-date-picker>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="结算单号">
                <el-input v-model="query.settlementCode" placeholder="输入结算单号进行搜索"/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="收款银行">
                <el-input v-model="query.bankName" placeholder="输入收款银行进行搜索"/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <rrOperation :crud="crud"/>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-table ref="table" stripe border v-loading="crud.loading" :row-class-name="crud.tableRowClassName"
                :data="crud.data"
                size="small" style="width: 100%;"
                :show-summary="true"
                sortable="custom"
                @sort-change="crud.sortChange"
                @selection-change="crud.selectionChangeHandler"
                @cell-dblclick="(row, column)=>cellDblclick(row, column)"
      >
        <el-table-column :render-header="crud.renderHeader" type="selection" width="60"/>
        <el-table-column :render-header="crud.renderHeader" type="index" width="60" label="序号"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('cancelDate')" prop="cancelDate"
                         label="核销日期"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('settlementCode')" prop="settlementCode"
                         label="结算单号"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('bankName')" prop="bankName"
                         label="收款银行"/>
        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('receiptAmount')" prop="receiptAmount"
                         label="收款金额"/>
      </el-table>
      <!--分页组件-->
      <pagination/>
    </div>
  </div>
</template>

<script>
import {getFinanceCustomerBalanceCancel} from '@/api/erp/financeCustomerBalanceCancel'
import CRUD, {crud, header, presenter} from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import jtgSelectPlus from '@/components/select/JtgSelectPlus'
// crud交由presenter持有
const defaultCrud = CRUD({
  title: '送货收款报表明细',
  params() {
    const href = location.href.split('/')
    return {
      orderId: href[href.length - 1] == 'add' ? 0 : href[href.length - 1],
    }
  },
  url: '/api/reportSendReceipt/detail', sort: '', crudMethod: {}
})
export default {
  name: 'ReportSendReceiptDetail',
  components: {pagination, crudOperation, rrOperation, udOperation, jtgSelectPlus},
  mixins: [presenter(defaultCrud), header(), crud()],
  dicts: [],
  data() {
    return {
      settlementId: null,
      permission: {
        export: ['admin', 'reportSendReceipt:export'],
        exportDetail: ['admin', 'reportSendReceipt:exportDetail'],
      },
      showDialog: false,
      detailTableData: []
    }
  },
  beforeUpdate() {
    if (this.$route.params.settlementId != 'add') {
      this.settlementId = this.$route.params.settlementId
      this.crud.order.settlementId = this.settlementId
    }
  },
  methods: {
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      return true
    }, // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
    },
    cellDblclick(row, column) {
      if ("结算单号" === column.label) {
        this.$router.push({path: '/finance/financeSettlementDetail/' + row.settlementId})
      }
    }
  }
}
</script>

<style scoped>
.table-img {
  display: inline-block;
  text-align: center;
  background: #ccc;
  color: #fff;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  line-height: 32px;
}
</style>
